<template>
    <div class="main">
    <div style="border-bottom: 3px solid skyblue;"></div>
    <div><el-row>
            <!-- <el-col :span="24" v-for="(o, index) in 10" :key="o" :offset="index > -1 ? 0 : 0"> -->
            <el-col :span="24" v-for="(item, k) in dataList" :key="k" >
                <el-card :body-style="{ padding: '0px' }" class="block-t" shadow="hover" @click.native="Demdetail(item)" style="cursor: pointer">
                <el-container class="ctn">
                        <el-header style="text-align:center;" height="50px">
                          <el-row >
                            <el-col :span="24"><h3>{{item.retitle}}</h3></el-col>
                          </el-row>
                        </el-header>
                        <el-main style="text-align: left; font-size: 14px;height:70px">
                          <el-row>
                            <el-col :span="24" ><sapn style="font-size: 16px;" class="tt">需求简介：</sapn><span class="tt-3">{{item.redescri}}</span></el-col>
                          </el-row>
                        </el-main>
                        <el-footer style="text-align: left; font-size: 14px;margin-top:15px">
                          <el-row>
                            <el-col :span="8" ><span class="tt-2">行业：</span><span class="tt-3">{{item.reclass}}</span></el-col>
                            <el-col :span="8" ><span class="tt-2">领域：</span><span class="tt-3">{{item.redoma}}</span></el-col>
                            <el-col :span="8" ><span class="tt-2">预算：</span><span class="tt-3">{{item.remoney}}</span></el-col>
                          </el-row>
                        </el-footer>
                </el-container>
                </el-card>
            </el-col>
            </el-row>
            <div class="blockpage">
              <sand-tachievements-grouppage ref="STApage" @getcurrentPage="getpage" @getpageSize="getpagesize"></sand-tachievements-grouppage>
            </div>
            </div>
    </div>
</template>

<script>
import SandTachievementsGrouppage from '../SandTAchievementsGroup/SandTachievementsGrouppage.vue'
  export default {
    data() {
      
      return {
        dataList:"",
        currentPage: 1,
        pageSize: 10,
        fid:"不限",
        inid:"不限",
        tid:"不限",
        // reqname:"",
        // reqtype:"",
        // reqfield:"",
        // reqindu:"",
        // reqcoin:"",
        // reqkw:"",
        // reqbg: "",
        // reqpb: "",
        // reqtarg: "",
        // reqbelongs: "",
        // reqown: "",
        // reqaddr: "",
        // reqperson: "",
        // reqcontact: "",
        // reqmail: "",
        search:"",
      }
    },
    methods:{
      
      getpage(p){
        console.log("当前页：",p)
        this.currentPage=p;
      },
      getpagesize(p){
        console.log("页大小：",p)
        this.pageSize=p;
      },
      Demdetail(item){
      this.$router.push({path:'/ReqDetail',
      query: {
        reqname:  item.retitle,
        reqtype:  item.reqtype,
        reqfield: item.redoma,
        reqindu:  item.reclass,
        reqcoin:  item.remoney,
        // reqkw:    item.reqkw,
        reqbg:    item.redescri,
        reqpb:    item.resolve,
        reqtarg:  item.retarget,
        reqbelongs: item.rebelong,
        reqown: item.rename,
        reqaddr: item.reqaddr,
        reqperson: item.relx,
        reqcontact: item.rephone,
        reqmail: item.reemail,
      }
      });
    },
    getreq(fid,inid,tid,searchInput,pageSize,currentPage){
      let params={
        // reqfield:fid,
        // reqindu:inid,
        // reqtype:tid,
        // searchInput:searchInput,
        pageSize:pageSize,
        currentPage:currentPage
      }
      console.log("进入getreq",params);
      this.api.getreq(params).then(res => {
        let {code, message, data} = res;
        if(['200', 200].includes(code) && res.success == true) {
          console.log("获得数据：",data);
          this.$refs.STApage.sendtotal(res.total);
          this.dataList = data;
        }
        else {
            this.$message({
                type: "info",
                message: message
            })
        }
      }).catch(err => {
          this.$message({
              type: "info",
              message: err
          })
      })
    },
    },
    components:{
      SandTachievementsGrouppage,
    },
    created(){
      console.log(this.fid,this.inid,this.tid,this.search);
      this.$bus.$on('getfield',fid=>{
        this.fid=fid;
        // console.log(this.fid);
      })
      this.$bus.$on('getindu',inid=>{
        this.inid=inid;
        // console.log("#",this.inid);
      })
      this.$bus.$on('gettype',tid=>{
        this.tid=tid;
        // console.log("##",this.tid);
      })
      this.$bus.$on('getsearch',search=>{
        this.search=search;
        // console.log("newsearch:",this.search)
      })
      this.getreq(this.fid,this.inid,this.tid,this.search,this.pageSize,this.currentPage)
    },
  watch:{
      tid:{
      handler(newVal,oldVal){
        this.getreq(this.fid,this.inid,newVal,this.search,this.pageSize,this.currentPwage)
      }
    },
    fid:{
      handler(newVal,oldVal){
        this.getreq(newVal,this.inid,this.bid,this.search,this.pageSize,this.currentPage)
      }
    },
    inid:{
      handler(newVal,oldVal){
        this.getreq(this.fid,newVal,this.bid,this.search,this.pageSize,this.currentPage)
      }
    },
    search:{
      handler(newVal,oldVal){
        console.log("%%",this.fid,this.inid,this.tid,newVal,this.pageSize,this.currentPage)
        this.getreq(this.fid,this.inid,this.tid,newVal,this.pageSize,this.currentPage)
      }
    },
    currentPage:{
      handler(newVal,oldVal){
        this.getreq(this.fid,this.inid,this.bid,this.search,this.pageSize,newVal)
      }
    }
    }
  };
</script>

<style scoped>
  .tt-3{
    overflow:hidden;
    color:#606266;
  }
  .tt{
    color:#409EFF;
  }
  .tt-2{
    font-size: 16px;
    color: rgb(219, 35, 35);
  }
  .el-header {
    /* background-color: #B3C0D1; */
    color: #333;
    
  }
  /* .sp{
    white-space:nowrap;
  } */
  .block-t{
      margin-top: 3%;
      margin-left: auto;
      margin-right: auto;
      padding: 2%;
      width: 800px;
      height: 150px;
      border-color:#ffe9da;
  }
  .el-aside {
    color: #333;
  }
  /* .el-main{
    background-color: antiquewhite;
  } */
  .main{
      width: 1180px;
      margin-left: auto;
      margin-right: auto;
  }
  .card-p{
    margin-right: 0px;
  }
</style>